<template lang="pug">
div.login-page
  div#login-page-background
  div.login-box
    div.row.logo-wrapper
      img.logo(src='../assets/logo.png')
    Card.login-card
      Alert.login-errors(type='error', v-if='errMsg') {{ errMsg }}
      Form(:model='formData', :label-width1=60, action='javascript:;')
        FormItem(prop='name', label1='用户账号', class='name-item')
          Input(type='text', v-model='formData.name' placeholder='账号', key='loginName')
            Icon(type='person', slot='prepend')
        FormItem(prop='pass', label1='用户密码', class='pass-group')
          Input(type='password', v-model='formData.pass', placeholder='密码', key='loginPass')
            Icon(type='android-compass', slot='prepend')
        //- div.other-link
          router-link.register(to='/register') 注册
          router-link.forget-pass(to='/password/forgot') 忘记密码
        div.login-wrapper
          Button(html-type='submit', type='primary', :loading='authenticating', @click='login', long) 登录
</template>

<script>
import Api from '@/apis'
export default {
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.errMsg = to.params.message
    })
  },
  data () {
    return {
      errMsg: null,
      authenticating: false,
      formData: {
        name: '',
        pass: ''
      }
    }
  },
  mounted () {
    this.initBackgroundBall()
  },
  methods: {
    login () {
      this.authenticating = true
      console.log('ready to login', this.formData)
      Api.User.login({name: this.formData.name, pass: this.formData.pass})
        // .then(() => {}, () => {
        //   throw new Error('登录失败，请检查账号和密码是否正确')
        // })
        .then(() => {
          this.$store.dispatch('login')
          this.$router.replace('/')
          // this.authenticating = false
        })
        .catch(err => {
          console.error(err)
          this.errMsg = '登录失败，请检查账号和密码是否正确'
          this.authenticating = false
        })
    },
    initBackgroundBall () {
      // Some random colors
      const colors = ['#FFB85B', '#76C8FD', '#B3E4FF', '#C4F4C2', '#FF958D']

      const numBalls = 20
      const balls = []

      for (let i = 0; i < numBalls; i++) {
        let ball = document.createElement('div')
        ball.classList.add('ball')
        ball.style.background = colors[Math.floor(Math.random() * colors.length)]
        ball.style.left = `${Math.floor(Math.random() * 100)}vw`
        ball.style.top = `${Math.floor(Math.random() * 100)}vh`
        ball.style.transform = `scale(${Math.random()})`
        ball.style.width = `${Math.random() * 2}em`
        ball.style.height = ball.style.width
        balls.push(ball)
        document.getElementById('login-page-background').append(ball)
      }

      // Keyframes
      balls.forEach((el, i, ra) => {
        let to = {
          x: Math.random() * (i % 2 === 0 ? -11 : 11),
          y: Math.random() * 12
        }

        el.animate(
          [
            { transform: 'translate(0, 0)' },
            { transform: `translate(${to.x}rem, ${to.y}rem)` }
          ],
          {
            duration: (Math.random() + 1) * 8000, // random duration
            direction: 'alternate',
            fill: 'both',
            iterations: Infinity,
            easing: 'ease-in-out'
          }
        )
      })
    }
  }
}
</script>

<style lang="less">
.login-page {
  width: 100%;
  max-width: 1920px;
  height: 100%;
  // padding-top: 50%;
  position: relative;
  #login-page-background {
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .ball {
      position: absolute;
      border-radius: 100%;
      opacity: 0.7;
      box-sizing: border-box;
    }
  }
  .login-box {
    z-index: 2;
    .ivu-card {
      background: rgba(0,0,0,0);
    }
  }
  .login-card {
    padding: 20px;
    width: 400px;
    border: none;
    &:hover {
      box-shadow: none;
    }
    .pass-group {
      .ivu-input-group {
        .ivu-input-group-prepend {
          padding-left: 13px;
        }
      }
    }
    .name-item {
      margin-bottom: 18px;
    }
    .ivu-input-group {
      font-size: 16px;
      .ivu-input-group-prepend {
        border-radius: 5px 0 0 5px;
        padding-left: 16px;
        background-color: #fff;
        border: 1px solid #dedede;
        border-right: none;
        .ivu-icon {
          font-weight: 400;
          color: #dedede;
        }
      }
      .ivu-input {
        border: 1px solid #dedede;
        border-radius: 0 5px 5px 0;
        border-left: none;
        height: 42px;
        font-size: 14px;
        &:focus {
          border: 1px solid #dedede;
          border-left: none;
          box-shadow: none;
        }
      }
    }
  }
  .login-wrapper {
    margin-top: 20px;
    .ivu-btn {
      height: 38px;
      border-radius: 5px;
      font-size: 14px;
    }
  }
  .logo-wrapper {
    text-align: center;

  }
  .other-link {
    margin-top: -16px;
    a {
      color: #656565;
      font-size: 12px;
    }
    .forget-pass {
      float: right;
    }
  }
  .login-box {
    // height: 240px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    h1, h2 {
      margin-bottom: 8px;
    }
  }
  .login-errors {
    margin-bottom: 24px;
  }
}
</style>
<style scoped>
.logo {
  height: 40px;
  width: auto;
}
</style>
